<!DOCTYPE html>
<html>
   <head>
      <title>网站首页</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="nivo/nivo-slider.css" rel="stylesheet">
      <link href="themes/bar/bar.css" rel="stylesheet">
      <link href="themes/dark/dark.css" rel="stylesheet">
      <link href="themes/default/default.css" rel="stylesheet">
       <link href="themes/light/light.css" rel="stylesheet">
      <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
      <script src="bootstrap/js/bootstrap.min.js"></script>
       <script src="nivo/jquery.nivo.slider.pack.js"></script>
      <!--[if lt IE 9]>
         <script src="js/html5shiv.js"></script>
         <script src="js/respond.min.js"></script>
      <![endif]-->
      <script src="js/menu.js"></script>
      <script>
      	$(function(){
      		$('.menus').menu();
      		var i = 1;
   			setInterval(function(){
   			$('.view').animate({'scrollLeft':685*i},1000);
   			i = ++i%4;
   			},2000);
      	});
      </script>
   </head>
   <style>
  body{padding-top:10px;width: 1400px;}
  .navbar{background:#6fb9b6;width:1420px;height:70px}
  .search{}
  #rowMain{border: solid 2px; height:  528px;width: 1430px;}
  #rowpictures{border:solid 1px;height:130px}
  #rowpicturess{border:solid 1px;height:130px}
  .rowLeft{border: solid 1px;width: 1400px;height: 520px}
  #left{height: 525px;}
  #letter{font-size:35px;font-family: '楷体';color:#448888;}
  #center{border: solid 1px;height: 525px}
  #right{border: solid 1px;height: 525px}
  #introduction{font-size: 23px;font-family: '楷体'}
  #inplace{font-size: 23px;font-family: '楷体'}
  #economy{font-size: 23px;font-family: '楷体'}
  #culture{font-size: 23px;font-family: '楷体'}
  #research{font-size: 23px;font-family: '楷体'}
  #journey{font-size: 23px;font-family: '楷体'}
  .menus{height:470px;width: 330px;padding:10px;overflow:scroll;background:#c9e6c6;text-align: center}
  .mainLeft{width: 330px;height:220px;border:solid 1px;}
  .mainRight{width: 330px;height: 265px;border:solid 1px}
  .main{width: 2740px}
  .menu{display: none;background: #7db9b9;}
  img{display:block;float: left}
  .view{width:685px;padding:10px;height:400px;overflow: hidden}
  .down{height:120px;width: 179px;overflow: hidden}
  .downCenter{width: 180px;height: 120px;}
  .downCenters{width: 180px;height: 120px;}
  .downRight{width:142px;height:120px;float: right}
  .current{font-size:15px;margin:20px;}
  .title{color:red}
  .title1{color:seagreen}
  .titles{color:red}
  .title3{color:#FF0000}
   </style>
   <body>
   			<nav class="navbar navbar-default">
 			<div class=" navbar-form text-right">
 				<div class="col-xs-4">
 					
 				</div>
 				<div class="col-xs-4 search">
 					<form id="searchForm">
	 					<div class="input-group">
	 						<input id="searInput" name="text" class="form-control" placeholder="搜索"/>
	 							<div class="input-group-btn">
	 								<button id="#" class="btn btn-primary"type="button">
	 								<span class="glyphicon glyphicon-search"> </span>
	 								</button>
	 							</div>
	 					</div>
 					</form>
 				</div>
 				<div class="col-xs-4">
 					<h4><a href="">去百度一下吧</a></h4>
 				</div>
 			</div>
 		</nav>
 		<div class="row">
 			<div class="col-xs-9" id="rowpictures">
 				
 			</div>
 			<div class="col-xs-3" id="rowpicturess">
 				
 			</div>
 		</div>
 		<div class="row" id="rowMain">
	 		<div class="col-xs-3" id="left">
		 		<div class="col-xs-12" id="letter">
			 			　江　南　水　乡
		 		</div>
	 			<div class="menus">
	 				<a href="#" id="introduction">历　　史</a>
	 				<div class="menu">
		 					江南的含义在古代文献中是变化多样的。
		 					它常是一个与水墨江南水墨江南“中原”
		 					“边疆”等区域概念相并立的词，且含糊不清。
		 					从历史上看，江南既是一个自然地理区域，
		 					也是一个社会政治和人文区域。在先秦时期已经存在江南的说法。
		 					《史记·秦本纪》中亦载：“秦昭襄王三十年，
		 					蜀守若伐楚，取巫郡，及江南为黔中郡。
		 					”早期出现的江南指的便是现今湖南省和湖北南部、
		 					江西部分地区。王莽时曾改夷道县为江南县，
		 					是今日湖北宜都地区。《后汉书·刘表传》
		 					载“江南宗贼大盛……唯江夏贼张庄、陈坐拥兵据襄阳城，
		 					表使越与庞季往譬之，及降，江南悉平”。一直到隋朝，
		 					那个时期的江南往往指的都是湖南、湖北一带
   					</div>
   					<hr />
   					<a href="#" id="inplace">地理环境</a>
   					<div class="menu">
   						字面意义为江之南面，
   						江南地域广阔，
   						狭义多指的是长江中下游平原的南岸等地区。
   						其中包括江苏长江以南地区，安徽省长江以南地区，
   						上海市，浙江省钱塘江以北地区。
   					</div>
   					<hr />
   					<a href="#" id="economy">经济发展</a>
   					<div class="menu">
   						东晋南朝时期，江南得到进一步开发，
   						社会经济有了较大的发展。
   						北方劳动人民不断南迁，
   						既提供了大批的劳动力，
   						也带去了先进的生产工具和生产技术。
   						南北劳动人民相互学习、辛勤劳动，
   						是江南经济发展和繁荣的重要原因。
   					</div>
   					<hr />
   					<a href="#" id="culture">区域文化</a>
   					<div class="menu">
   						江南文化的本质是一种诗性文化。
   						也正是在诗性与审美的环节上，
   						江南文化才显示出它对儒家人文观念的一种重要超越。
   						由于诗性与审美内涵直接代表着个体生命
   						在更高层次上自我实现的需要，所以说人文精神发生最早、
   						积淀最深厚的中国文化，是在江南文化中才实现了
   						它在逻辑上的最高环节，并在现实中获得了较为全面的发展。
   					</div>
   					<hr />
   					<a href="#" id="research">学者研究</a>
   					<div class="menu">
   						到秦汉时期，“江南”的含义略显明确，
   						主要指的是今长江中游以南的地区，
   						即今湖南省、湖北南部和江西部分等地。
   						《史记·秦本纪》中说：“秦昭襄王三十年，
   						蜀守若伐楚，取巫郡，及江南为黔中郡。
   						”黔中郡在今湖南西部。由此可见当时“江南”
   						的范围之大。但据《史记·五帝本纪》，
   						可知其南界一直达到南岭一线。
   					</div>
   					<hr />
   					<a href="#" id="journey">旅　　游</a>
   					<div class="menu">
   						南京瞻园、苏州的拙政园和留园、
   						无锡寄畅园被并称为江南四大名园。
   						江南园林是以开池筑山为主的自然式风景山水园林，
   						兴盛于六朝，终于明清。以苏州市、常州市、
   						扬州市、南京市、绍兴市、杭州市、无锡市、
   						黄山市、池州市、湖州市、上海市、嘉兴市、
   						宣城市、芜湖市、上饶市等城市为主。
   					</div>
	 			</div>
	 			
	 		</div>
	 		<div class="col-xs-6" id="center">
	 			<div class="view">
				   	<div class="main">
				   		<img src="img/1.png"/>
				   		<img src="img/2.png" />
				   		<img src="img/3.png" />
				   		<img src="img/4.png" />
				   	</div>
   				</div>
   				
   				<div class="down col-xs-3">
   					<div class="slider-wrapper nivoSlider">
	   					<img src="img/6.png" />
	   					<img src="img/7.png" />
	   					<img src="img/8.png" />
	   					<img src="img/9.png" />
	   					<img src="img/10.png" />
   					</div>
   				</div>
   					<div class="downCenter col-xs-3">
   						<h4 class="title">美食一条街</h4>
   						<h6 class="title1">清醉白玉蟹　乡间霉千张　</h6>
   						<h6 class="title1">长塘笋炒肉　小越霸王牛头</h6>
   						<h5><a href="">查看更多.....</a></h5>
   					</div>
   					<div class="col-xs-3 downCenters">
   						<div class="slider-wrapper nivoSlider">
   						 <img src="img/jn1.png" />
   						 <img src="img/jn2.png" />
   						 <img src="img/jn3.png" />
   						 <img src="img/jn4.png" />
   						 </div>
   					</div>
   					<div class="col-xs-3 downRight">
   						<h4 class="titles">江南秀水</h4>
   						<h6 class="title1">红梅公园　瞻园</h6>
   						<h6 class="title1">寄畅园　拙政园</h6>
   						<h5><a href="">去看看.....</a></h5>
   					</div>
	 		</div>
	 		<div class="col-xs-3" id="right">
	 			<h5 class="title3">你可能还感兴趣</h5>
	 			<div class="mainLeft slider-wrapper nivoSlider">
	 			<img src="img/sg.jpg" title="水果养生之道" />
	 			<img src="img/sh.jpg" title="阳光死海" />
	 			<img src="img/sy.jpg" title="我爱摄影" />
	 			<img src="img/et.jpg" title="关爱贫困儿童" />
	 			<img src="img/link.jpg" title="汪星人来啦" />
	 			</div>
		 		<div class="mainRight">
		 			
		 		</div>
	 		</div>
 		</div>
 		</body>
 		 <script>
   	$('.nivoSlider').nivoSlider({
   		directionNav:false,
   		pauseOnHover:true,
   		controlNav:false,
   		effect:'fade',
   	});
   </script>
</html>